<template>
	<view>
		<Sheader :title="'服务者注册'" :background="'#fff'" :color="'#203136'"/>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="210" label="本人文化程度" :required="true">
					<u-input v-model="form.education" type="select" :border="false" @click="show = true" placeholder="请选择本人文化程度"/>
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label-width="210" label="有无培训证" :required="true">
					<u-input v-model="form.certificate" type="select" :border="false" @click="showCertificate = true" placeholder="请选择有无培训证"/>
					<u-action-sheet :list="actionCertificateList" v-model="showCertificate" @click="actionCertificate"></u-action-sheet>
				</u-form-item>
				<u-form-item label-width="210" label="证件类型名称" :required="true">
					<!-- <u-input v-model="form.certificateType" placeholder="请输入证件类型名称" /> -->
					<u-input v-model="form.certificateType" type="select" :border="false" @click="showCertificateType = true" placeholder="请输入证件类型名称"/>
					<u-action-sheet :list="actionCertificateTypeList" v-model="showCertificateType" @click="actionCertificateType"></u-action-sheet>
				</u-form-item>
				<u-form-item label-width="210" label="证件编号" :required="true">
					<u-input v-model="form.certificateNo" placeholder="请输入证件编号" />
				</u-form-item>
				<u-form-item label-width="210" label="目前居住地址" :required="true">
					<u-input v-model="form.address" placeholder="请输入目前居住地址" />
				</u-form-item>
			</u-form>
			<view class="title-view">服务须知</view>
			<view class="form-view">
				<u-input v-model="form.remark" maxlength="500" type="textarea" :auto-height="true" :border="true" :height="400" placeholder="可以填写自我介绍，工作经验，你的收费标准、
你的服务方式等，你的内容完善越容易获得更多
的订单。如果是车辆出租，可以对车辆的状态性
能进行描述"/>
			</view>
			<view class="title-view">上传服务者身份证照片</view>
			<view class="form-view">
				<u-upload :action="$http.uploadUrl()" :max-count="1" :upload-text="'身份证正面照'" :to-json="true" :file-list="cardList" @on-change="uploadChang"></u-upload>
			</view>
			<view class="title-view">上传其他证件（例：教师证/护理证等）</view>
			<view class="form-view">
				<u-upload :action="$http.uploadUrl()" :upload-text="'其他证件'" :to-json="true" :file-list="cardList" @on-change="uploadChangOther"></u-upload>
			</view>
			<!-- <view class="register-check">
				<u-checkbox v-model="isChecked" shape="circle">
					<text  class="text" @click="$utils.gotoPage('../agreement/index')">我同意《会员服务协议》</text>	
				</u-checkbox>
			</view> -->
			<u-button class="register-btn" type="primary" @click="sendForm">注册</u-button>
			<view class="user-info">
				<view class="user-info__box">
					填写须知：<br/>
					1、服务者因为需要为用户提供上门服务，我们对服务者的身份需要审核后才能开通，服务者在提交资料时必须依次填写全部内容后方可审核通过。<br/>
					2、是否有证：是指你本人是否已经取得的各种职业技术等级证书、如驾驶证、培训证、律师证、职业培训证等等。如果已经取得选择《有》，否则选择《无》。<br/>
					3、证件类型：这里的证件类型是指你已经取得的各种职业技术等级证书、如驾驶证、培训证、律师证、职业培训证等等。
				</view>
			</view>
			<view class="user-bottom">
				提示：这里填写的信息必须和注册时填写的信息完全一致才能找回密码
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="showTip" :content="content" :title="title" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import Sheader from '@/components/Sheader/index.vue'
	export default {
		data() {
			return {
				showTip: false,
				show: false,
				showCertificate: false,
				showCertificateType: false,
				showSex: false,
				showDate: false,
				title: '提示',
				content: '请输入正确的手机号',
				isChecked: false,
				gender: '',
				cardList: [],
				otherList: [],
				form: {
					id: '',
					education: '',
					certificate: '',
					certificateType: '',
					certificateNo: '',
					address: ''
				},
				actionSheetList: [],
				actionCertificateList: [
					{
						text: '有'
					},
					{
						text: '无'
					}
				],
				actionCertificateTypeList: []
			}
		},
		components: {
			Sheader
		},
		async onLoad(e) {
			this.form.id = e.id
			await this.$http.request('/baseData/list?type=certType', {}, 'get', true, false).then((res) => {
				if (res.success) {
					res.data.forEach((v) => {
						v.text = v.value
					})
					this.actionCertificateTypeList = res.data
					return
				}
			})
			await this.$http.request('/baseData/list?type=education', {}, 'get', true, false).then((res) => {
				if (res.success) {
					res.data.forEach((v) => {
						v.text = v.value
					})
					this.actionSheetList = res.data
					console.log(this.actionSheetList)
					return
				}
			})
		},
		onUnload() {
		},
		methods: {
			actionSheetCallback(index) {
				this.form.education = this.actionSheetList[index].value;
			},	
			actionCertificate(index) {
				this.form.certificate = this.actionCertificateList[index].text;
			},
			actionCertificateType(index) {
				this.form.certificateType = this.actionCertificateTypeList[index].value;
			},
			uploadChang(res, index, lists, name) {
				if (res.data) {
					const data = JSON.parse(res.data)
					if (data.success) {
						this.cardList[index] = {}
						this.cardList[index].filePath = data.data.filePath
					}
				}
			},
			uploadChangOther(res, index, lists, name) {
				if (res.data) {
					const data = JSON.parse(res.data)
					if (data.success) {
						this.otherList[index] = {}
						this.otherList[index].filePath = data.data.filePath
					}
				}
			},
			async sendForm() {			
				if(!this.form.education) {
					this.showTip = true
					this.content = '请选择学历'
					return false
				}
				if(!this.form.certificate) {
					this.showTip = true
					this.content = '请选择有无培训证'
					return false
				}
				if(this.form.certificate == '有' && !this.form.certificateType) {
					this.showTip = true
					this.content = '请选择证件类型名称'
					return false
				}
				if(this.form.certificate  == '有' && !this.form.certificateNo) {
					this.showTip = true
					this.content = '请输入证件编号'
					return false
				}
				if(!this.form.address) {
					this.showTip = true
					this.content = '请输入目前居住地址'
					return false
				}
				if(!this.cardList.length) {
					this.showTip = true
					this.content = '请上传身份证照片'
					return false
				}
				this.form.idCardImg = this.cardList[0].filePath
				this.form.otherImgs = this.otherList.map((v) => {
					return v.filePath
				}).join()
				const res = await this.$http.request('/provider/register/step2', this.form, 'post', true, false).then((res) => {
					if (!res.success) {
						this.showTip = true
						this.content = res.msg
						return
					}
					this.title = '注册成功'
					this.content = `恭喜你注册成功，你已成为上门服务
						的会员客户，请记住你的会员号码是
						你填写的身份证号码。进入会员中心
						，你可以修改自己的资料。新注册的
						会员均可获得赠送的会员费60元，
						免费体验3个月，你现在可以上传的
						你服务项目，给网友提供你最好的
						服务。`
					this.showTip = true
				})
			},
			confirm() {
				if (this.title == '注册成功') {
					uni.reLaunch({
						url: '/pages/user/index'
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		padding-top: 90rpx;
		height: 100vh;
	}
	.title {
		font-family: YouSheBiaoTiHei;
		margin: 32rpx 0;
		font-size: 48rpx;
		font-weight: 800;
		line-height: 48rpx;
		color: #FFFFFF;
		font-style: oblique;
	}
	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 24rpx;
		color: #ECF5FF;
		opacity: 0.9;
	}
	
	/deep/ .u-form-item {
		width: 85vw;
	}
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #fff;
		opacity: 0.5;
	}
	
	.bottom-left {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 50rpx;
		color: #FFFFFF;
		opacity: 0.5;
	}
	.bottom-right {
		padding: 20rpx 46rpx;
		background-color: rgba(255,255,255,0.2);
		border-radius: 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #FFFFFF;
		opacity: 1;		
	}
	.send-btn {
		width: 180rpx;
		font-size: 12rpx;
	}
	.text {
		color: #2979FF;
	}
	.register-check {
		height: 54rpx;
	}
	/deep/ .u-checkbox {
		margin-top: 10rpx;
		width: 85vw;
		text-align: left;
	}
	.register-btn {
		margin-top: 20rpx;
		width: 85vw;
	}
	.user-info {
		padding: 30rpx;
		background-color: #fff;
	}
	.user-info__box {
		padding: 24rpx 20rpx;
		border: 1px solid #C0C4CC;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #303133;
		opacity: 1;		
	}	
	.user-bottom {
		padding: 26rpx;
		text-align: left;
		font-size: 10rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #909399;
		opacity: 1;
		background: #F8F8F8;
		width: 100%;
	}
	.title-view{
		width: 100%;
		padding-left: 40rpx;
		box-sizing: border-box;
		height: 100rpx;
		line-height: 100rpx;
		background: #ECF5FF;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #2979FF;		
		opacity: 1;
	}
	.form-view {
		width: 100%;
		padding: 40rpx;
	}
	/deep/ .uni-input-wrapper{
		align-items: flex-start;
	}
	/deep/ .u-add-wrap {
		background: #ECF5FF;
		color: #2979FF;
	}
</style>
